<template>
    <Teleport to="body">
        <div v-if="isLoading" class="loading-box">
        <div class="loading-content">
            <div class="loading"></div>
            <div class="loading-text">加载中...</div>
        </div>
    </div>
    </Teleport>
    
</template>

<script setup lang="ts">
import { Teleport } from 'vue';
defineProps({
    isLoading: {
        type: Boolean,
        default: false
    }
})
</script>

<style scoped lang="scss">
.loading-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    .loading-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;

        .loading {
            margin: auto;
            width: 40px;
            height: 40px;
            border: 2px solid #fff;
            border-top-color: transparent;
            border-radius: 100%;
            animation: circle infinite 0.75s linear;
        }

        // 转转转动画
        @keyframes circle {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .loading-text {
            color: #666;
            font-size: 14px;
        }
    }
}
</style>